<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inner command</title>
    <script src="../../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <input type="text" v-bind:value="mymsg">
        {{msg}}
        <p v-text="msg"></p>
        <p v-html="my_html"></p>

        <p>{{msg}}</p>
        <button v-on:click="showInfo">click me</button>
        <button @click="showInfo">click me</button>


        <div v-for="(item,key) in list" >
            index :{{key}},content :{{item}}
        </div>

        <div v-show="isShow">v-if</div>
        <button @click="isShow=!isShow">show/hide</button>
    </div>


   <script>
       var vm=new Vue({
           el:"#app",
           data:{
               msg:"V-model 指令",
               my_html:'<h1>i am v-html</h1>',
               mymsg:"test",
               list:[1,2,3],
               isShow:true,
           },
           methods:{
               showInfo(){
                   this.msg='v-on click'
               }
           }
       })

   </script> 
</body>
</html>